<template>
   <div class="tw-libtext xweather"
    :class="{[`x${this._uid}`]:true}">
    <template v-if="cssCustom && cssCustom === '1'" >
      <div class="tw-libtext-content xcsscustom1">
      <div class="xleft">
        <span class="xshijian">{{shijian}}</span>
        <br>
        <span class="xriqi">{{riqi}}</span>
      </div>
      <div class="xline xpadleft"></div>
      <div class="xpadleft">
        <template>
        <img class="xicon" src="@assets/sun.png">
        </template>
        <img class="xicon" src="@assets/tmp.png">
        {{weather.temperature}}℃
      </div>
      </div>
    </template>
    <template v-else>
     <div class="tw-libtext-content">{{datatime}}<span class="xpadleft">{{weather.weather}}</span><span class="xpadleft">{{weather.temperature}}℃</span><span class="xpadleft">{{weather.winddirection}}风{{weather.windpower}}级</span><span class="xpadleft">湿度{{weather.humidity}}%</span></div>
    </template>
   </div>
</template>

<script>
import props from './props'

export default {
  name: 'weathertext',

  props,

  data() {
    return {
      weathertimer: null,
      datatime: '2020年8月18日',
      riqi: '',
      shijian: '',
      xingqi: '',
      weather: {
        humidity: '0',
        reporttime: '2020年8月18日',
        temperature: '0',
        weather: '晴',
        winddirection: '东',
        windpower: '≤1'
      }
    }
  },

  computed: {
    style () {
      return {
        padding: this.padding,
        lineHeight: this.lineHeight,
        fontFamily: this.fontFamily,
        fontSize: this.fontSize,
        fontWeight: this.fontWeight ? '700' : '400',
        background: this.bgColor,
        color: this.color,
        textAlign: this.align,
        paddingLeft: this.paddingLeft
      }
    }
  },

  methods: {
    getWeather () {
      let vm = this
      let areaid = '430100'
      if (vm.areaid) {
        areaid = vm.areaid
      }
      window.axios.get('https://open.teewon.net:9009/openapi-weather/getWeatherInfo?city=' + areaid + '&ip=&extensions=base').then(res => {
        if (res.data && res.data.responseEntity && res.data.responseEntity.lives.length > 0) {
          vm.weather = res.data.responseEntity.lives[0]
        }
      }).catch(err => {
        console.error(err)
      })
    },
    setStyle () {
      let style = `
        ::root.tw-libtext.xweather {
          background-color: ${this.bgColor};
          line-height: ${this.lineHeight};
          padding: ${this.padding};
          text-align: ${this.align};
        }

        ::root.tw-libtext.xweather .tw-libtext-content {
          color: ${this.color};
          font-size: ${this.fontSize};
          font-weight: ${this.fontWeight ? '700' : '400'};
          font-family: ${this.fontFamily};
        }

        ::root.tw-libtext.xweather .xpadleft {
          padding-left:  ${this.paddingLeft};
        }
      `

      if (this.cssCustom && this.cssCustom === '1') {
        style += `
          ::root.tw-libtext.xweather .tw-libtext-content.xcsscustom1{
            display: flex;
            align-items: center;
          }

          ::root.tw-libtext.xweather .tw-libtext-content.xcsscustom1 .xline {
            border-right: 1px solid ${this.color};
            height: ${this.lineHeight};
          }

          ::root.tw-libtext.xweather .tw-libtext-content.xcsscustom1 .xleft {
            text-align: right;
          }

          ::root.tw-libtext.xweather .tw-libtext-content.xcsscustom1 .xriqi {
            font-size: ${this.fontSize1};
          }

          ::root.tw-libtext.xweather .tw-libtext-content.xcsscustom1 .xicon {
            height: ${this.iconHeight};
            margin-right: 5px;
          }

        `
      }

      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    }
  },

  mounted () {
    let vm = this
    this.getWeather()
    this.setStyle()
    this.weathertimer = setInterval(() => {
      let today = new Date()
      let day = today.getDay()
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let week = weeks[day]
      vm.datatime = today.toISOString().substring(0, 10) + ' ' + today.toTimeString().substring(0, 9) + ' ' + week
      vm.riqi = today.toISOString().substring(0, 10)
      vm.shijian = today.toTimeString().substring(0, 9)
      vm.xingqi = week
      if (today.toTimeString().substring(0, 8) === '00:00:01') {
        vm.getWeather()
      }
    }, 1000)
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  },
  beforeDestroy () {
    if (this.weathertimer) {
      clearInterval(this.weathertimer)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
